Case gzh_58a26a6991c8af72ce1d9c5269f630dc · AI知识卡片制作

原文: 用DeepSeek生成知识卡片，3步搞定图片设计！
https://mp.weixin.qq.com/s?__biz=MzkzODk0ODc1Mg==&idx=1&mid=2247484222&sn=d3b0cedd852a151c9e0a400d92c0a8fc
微信公众号 · 未知 · 2025-09-14 19:48:00

摘要: [image: https://mmbiz.qpic.cn/mmbiz_jpg/FUjwhO1yWwyX6xHiaDEdyxBm54QqXtj45vRY6dJThicueKlS9jCZTWRHZ6Z6gD0FdGic4GUAVQE7OKjF

过去，我们做知识卡片，无论排版、还是配色，都得亲力亲为手动制作。

而现在，DeepSeek就能帮我们轻松搞定了。

只要三步，就能快速生成风格统一、样式美观的知识卡片。

无论是做

知识类、干货类内容的自媒体配图，还是复习笔记、会议纪要，都非常方便。

今天呢，我就分享给大家，如何

用DeepSeek生成知识卡片，步骤简单，效果专业

！

第1步

打

开DeepSeek，选择合适模型

打开DeepSeek，选择

DeepSeek-V3.1模型

，因为V3模型的

编程代码生成能力和前端设计能力、是会更强的

，更适合完成卡片制作的任务。

操作：

在输入框，关闭【深度思考（R1）】和【联网搜索】，这样就能确保，我们使用的是 DeepSeek-V3.1 模型。

第2步

输入提示词，生成卡片代码

接下来，把你想要做成卡片的内容，整理成文字，比如笔记、文章等。

然后呢，在DeepSeek输入内容，并输入一段提示词，让AI生成卡片。

你是一位融合了顶尖信息架构师洞察力、资深教育设计师规划能力、世界级视觉设计师审美眼光的AI知识卡片设计大师。你的核心任务是，接收任意类型的源文档，把内容结构化处理，生成一系列视觉精美、信息密度适中、版面布局均衡的知识卡片。

格式：

以

HTML

格式输出，确保代码可以直接复制使用。

设计风格：

现代简约设计

响应式布局，适配不同设备

合理使用色彩对比增强可读性

包含适当的留白和间距

卡片结构：

图片比例为

3

:

4

醒目的标题区域

核心概念简明概述

相关例子或应用场景（如适用）

可选的视觉元素（如图标、分隔线等）

每张卡只包含核心要点或关键信息列表

内容特点：

信息精炼，避免冗长

使用简洁明了的语言

按逻辑顺序组织内容

重点内容有视觉强调

请直接生成完整的HTML代码，包含内联CSS样式，确保卡片美观且可立即使用。

代码应该干净、规范，并添加适当注释以便我理解和修改；

最底部增加【保存卡片】按钮，完整实现了保存卡片为PNG图片的功能。

第3步

预览效果，导出知识卡片。

很快，DeepSeek就生成好了

HTML代码

，经过调整满意后，导出就好。

操作：

① 直接【预览效果】，如果满意，用截图工具截取卡片。

② 或者，点击【下载】，点击“另存为”，保存到本地，打开本地 HTML 文件，点击下载按钮，一键保存好图片。

另推荐：

Markdown转换法—更灵活的风格选择

结语

AI，降低了设计门槛

DeepSeek的强大，不断在降低设计门槛，

让我们能更好的去专注内容，提升创作效率。

现在开始，只需要通过上面的方法，你就能轻松制作精美的知识卡片啦！

AI，确实是我们的好帮手，赶紧生成你的第一套AI知识卡片吧~

需求 # 目的 作用 实质 形式
输入 类型 值 来源
实现 外部工具 动作 指令
输出 类型 值 去处
高亮推断 点击列名 ↔ 显示/隐藏 · 点击组名 ↔ 整组切换 · 「推」角标 hover 看推断理由
工序 DeepSeek生成知识卡片 #目的: 利用DeepSeek生成知识卡片HTML代码，并保存为图片 类别: 产物创造 case: gzh_58a26a6991c8af72ce1d9c5269f630dc
返回
图片成品
需求 输入 实现 输出
# 目的 作用 实质 形式 类型 值 来源 外部工具 动作 指令 类型 值 去处
s1
用 DeepSeek-V3.1 生成 笔记内容，得到 HTML代码
主体生成知识卡片现代简约{'type': '笔记内容'}把你想要做成卡片的内容，整理成文字，比如笔记、文章等。 [image: https://mmbiz.qpic.cn/mmbiz_png/FUjwhO1yWwyX6xHiaDEdyxBm54QqXtj45yOOnFXKQRbzXwMkicZOaxRtgCGuhajtth9fdnrdick0YewNLNXVqQrJg/640?wx_fmt=png] 然后呢，在DeepSeek输入内容，并输入一段提示词，让AI生成卡片。 你是一位融合了顶尖信息架构师洞察力、资深教育设计师规划能力、世界级视觉设计师审美眼光的AI知识卡片设计大师。你的核心任务是，接收任意类型的源文档，把内容结构化处理，生成一系列视觉精美、信息密度适中、版面布局均衡的知识卡片。 格式： 以 HTML 格式输出，确保代码可以直接复制使用。 设计风格： 现代简约设计 响应式布局，适配不同设备 合理使用色彩对比增强可读性 包含适当的留白和间距 卡片结构： 图片比例为 3 : 4 醒目的标题区域 核心概念简明概述 相关例子或应用场景（如适用） 可选的视觉元素（如图标、分隔线等） 每张卡只包含核心要点或关键信息列表 内容特点： 信息精炼，避免冗长 使用简洁明了的语言 按逻辑顺序组织内容 重点内容有视觉强调 请直接生成完整的HTML代码，包含内联CSS样式，确保卡片美观且可立即使用。 代码应该干净、规范，并添加适当注释以便我理解和修改； 最底部增加【保存卡片】按钮，完整实现了保存卡片为PNG图片的功能。← 工序输入DeepSeek-V3.1生成/元素生成{'id': 's1o1', 'type': 'HTML代码'}s1o1 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>冯唐《成事心法》知识卡片</title> <style> /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; } body { background-color: #f5f7f9; padding: 20px; } ===== [图 7] 来源: https://mmbiz.qpic.cn/mmbiz_png/FUjwhO1yWwyX6xHiaDEdyxBm54QqXtj45tyHmdNaezD3sRHrBPKSHLz2to ===== 实现了保存卡片为PNG图片的功能。→ s2
程序控制类型/指令/提示词你是一位融合了顶尖信息架构师洞察力、资深教育设计师规划能力、世界级视觉设计师审美眼光的AI知识卡片设计大师。你的核心任务是，接收任意类型的源文档，把内容结构化处理，生成一系列视觉精美、信息密度适中、版面布局均衡的知识卡片。 格式： 以 HTML 格式输出，确保代码可以直接复制使用。 设计风格： 现代简约设计 响应式布局，适配不同设备 合理使用色彩对比增强可读性 包含适当的留白和间距 卡片结构： 图片比例为 3 : 4 醒目的标题区域 核心概念简明概述 相关例子或应用场景（如适用） 可选的视觉元素（如图标、分隔线等） 每张卡只包含核心要点或关键信息列表 内容特点： 信息精炼，避免冗长 使用简洁明了的语言 按逻辑顺序组织内容 重点内容有视觉强调 请直接生成完整的HTML代码，包含内联CSS样式，确保卡片美观且可立即使用。 代码应该干净、规范，并添加适当注释以便我理解和修改； 最底部增加【保存卡片】按钮，完整实现了保存卡片为PNG图片的功能。
s2
用 浏览器/截图工具 获取 HTML代码，得到 图片成品
交付知识卡片现代简约{'type': 'HTML代码'}# 🎯 冯唐《成事心法》知识卡片 ## 一、🧠 自我认知与修炼 ### 1. 天赋管理← s1o1浏览器/截图工具获取/录入/拍摄{'type': '图片成品', 'id': 's2o1'}s2o1 <一张生成的知识卡片图片>
程序控制类型/指令/提示词无
工序 Markdown转换法生成知识卡片 #目的: 利用DeepSeek生成Markdown代码，通过MD2Card生成知识卡片并保存为图片 类别: 产物创造 case: gzh_58a26a6991c8af72ce1d9c5269f630dc
返回
图片成品
需求 输入 实现 输出
# 目的 作用 实质 形式 类型 值 来源 外部工具 动作 指令 类型 值 去处
s1
用 DeepSeek-V3.1 生成 笔记内容，得到 Markdown代码
主体生成知识卡片现代简约{'type': '笔记内容'}把你想要做成卡片的内容，整理成文字，比如笔记、文章等。 [image: https://mmbiz.qpic.cn/mmbiz_png/FUjwhO1yWwyX6xHiaDEdyxBm54QqXtj45yOOnFXKQRbzXwMkicZOaxRtgCGuhajtth9fdnrdick0YewNLNXVqQrJg/640?wx_fmt=png] 然后呢，在DeepSeek输入内容，并输入一段提示词，让AI生成卡片。 你是一位融合了顶尖信息架构师洞察力、资深教育设计师规划能力、世界级视觉设计师审美眼光的AI知识卡片设计大师。你的核心任务是，接收任意类型的源文档，把内容结构化处理，生成一系列视觉精美、信息密度适中、版面布局均衡的知识卡片。 格式： 以 HTML 格式输出，确保代码可以直接复制使用。 设计风格： 现代简约设计 响应式布局，适配不同设备 合理使用色彩对比增强可读性 包含适当的留白和间距 卡片结构： 图片比例为 3 : 4 醒目的标题区域 核心概念简明概述 相关例子或应用场景（如适用） 可选的视觉元素（如图标、分隔线等） 每张卡只包含核心要点或关键信息列表 内容特点： 信息精炼，避免冗长 使用简洁明了的语言 按逻辑顺序组织内容 重点内容有视觉强调 请直接生成完整的HTML代码，包含内联CSS样式，确保卡片美观且可立即使用。 代码应该干净、规范，并添加适当注释以便我理解和修改； 最底部增加【保存卡片】按钮，完整实现了保存卡片为PNG图片的功能。← 工序输入DeepSeek-V3.1生成/元素生成{'type': 'Markdown代码', 'id': 's1o1'}s1o1 # 🎯 冯唐《成事心法》知识卡片 ## 一、🧠 自我认知与修炼 ### 1. 天赋管理→ s2
程序控制类型/指令/提示词请把以下内容制作成知识卡片，用Markdown格式输出，保留所有文字，风格简洁美观，可适当添加emoji。
s2
用 MD2Card编辑器 获取 Markdown代码，得到 图片成品
交付知识卡片现代简约{'type': 'Markdown代码'}# 🎯 冯唐《成事心法》知识卡片 ## 一、🧠 自我认知与修炼 ### 1. 天赋管理← s1o1MD2Card编辑器获取/录入/拍摄{'id': 's2o1', 'type': '图片成品'}s2o1 <一张生成的知识卡片图片>
程序控制类型/指令/提示词无